import React from 'react';

import {Link,Outlet,useNavigate} from "react-router-dom";

function Message(props) {

    const navigate=useNavigate()

    const messages=[
        {id:'001',title:'消息1',content:'锄禾日当午'},
        {id:'002',title:'消息2',content:'汗滴禾下土'},
        {id:'003',title:'消息3',content:'谁之盘中餐'},
        {id:'004',title:'消息4',content:'粒粒皆辛苦'},
    ]


    function showDetail(item){
        navigate('detail',{
            replace:false,
           state:{
               id:item.id,
               title:item.title,
               content:item.content
           }
        })
    }

    return (
        <div>
            <div>
                <ul>
                    {messages.map((item)=>{
                        return(
                            <li key={item.id}>
                                <Link to='detail' state={{
                                   id:item.id,
                                    title:item.title,
                                    content:item.content
                                }}>{item.title}</Link>
                                <button onClick={()=>showDetail(item)}>查看详细</button>
                            </li>
                        )
                    })}
                </ul>
            </div>
            <Outlet></Outlet>
        </div>
    );
}

export default Message;